<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>jquery全屏响应式淡入淡出效果轮播图插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			
			a,
			img {
				border: 0;
			}
			/* flexslider */
			
			.flexslider {
				position: relative;
				height: 646px;
				overflow: hidden;
				background: url(images/loading.gif) 50% no-repeat;
			}
			
			.slides {
				position: relative;
				z-index: 1;
			}
			
			.slides li {
				height: 646px;
			}
			
			.flex-control-nav {
				position: absolute;
				bottom: 10px;
				z-index: 2;
				width: 100%;
				text-align: center;
			}
			
			.flex-control-nav li {
				display: inline-block;
				width: 14px;
				height: 14px;
				margin: 0 5px;
				*display: inline;
				zoom: 1;
			}
			
			.flex-control-nav a {
				display: inline-block;
				width: 14px;
				height: 14px;
				line-height: 40px;
				overflow: hidden;
				background: url(images/dot.png) right 0 no-repeat;
				cursor: pointer;
			}
			
			.flex-control-nav .flex-active {
				background-position: 0 0;
			}
			
			.flex-direction-nav {
				position: absolute;
				z-index: 3;
				width: 100%;
				top: 45%;
			}
			
			.flex-direction-nav li a {
				display: block;
				width: 50px;
				height: 50px;
				overflow: hidden;
				cursor: pointer;
				position: absolute;
			}
			
			.flex-direction-nav li a.flex-prev {
				left: 40px;
				background: url(images/prev.png) center center no-repeat;
			}
			
			.flex-direction-nav li a.flex-next {
				right: 40px;
				background: url(images/next.png) center center no-repeat;
			}
		</style>
	</head>

	<body>
		<div class="htmleaf-container">
			<div class="flexslider">
				<ul class="slides">
					<li style="background:url(images/banner1.jpg) 50% 0 no-repeat;"></li>
					<li style="background:url(images/banner2.jpg) 50% 0 no-repeat;"></li>
					<li style="background:url(images/banner3.jpg) 50% 0 no-repeat;"></li>
				</ul>
			</div>
		</div>

		<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
		<script>
			window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')
		</script>
		<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('.flexslider').flexslider({
					directionNav: true,
					pauseOnAction: false
				});
			});
		</script>
	</body>

</html>